table.progressBar {
	border:none;
	border-spacing: 1px;
}

table.progressBar td { border:none; }

/* size of the progress bar */
table.progressBar[class~='progressBar-vertical']  td	{ height:3px; width:50px; }
table.progressBar[class~='progressBar-horizonal'] td	{ height:30px; width:1px; }

/* default color progress bar -> green and dark green*/
table.progressBar td.progressBar-on			{ background-color:#0f0; }
table.progressBar td.progressBar-off		{ background-color:#060; }

/* style of values */
table.progressBar td.progressBar-value {
	font-family:Small Fonts;
	font-size:0.9em;
	color:#0f0;
	text-align:center;
	background:none;
}

/* special style of values for horizontal progress bar*/
table.progressBar[class~='progressBar-horizonal'] td.progressBar-value {
	width:50px;
	text-align:right;
	height:30px;
}

/*
HTML STRUCTURE OF A VERTICAL PROGRESS BAR

<table title="xx/max xx%" class="progressBar progressBar-vertical">
<tr><td class="progressBar-off"></td></tr>
<tr><td class="progressBar-off"></td></tr>
...
<tr><td class="progressBar-on"></td></tr>
<tr><td class="progressBar-on"></td></tr>
...
<tr><td class="progressBar-value">xx %</td></tr>
</table>




HTML STRUCTURE OF A HORIZONTAL PROGRESS BAR
<table title="xx/max xx%" class="progressBar progressBar-horizonal">
<tr><td class="progressBar-value">xx %</td>
<td class="progressBar-on"></td>
<td class="progressBar-on"></td>
...
<td class="progressBar-off"></td>
<td class="progressBar-off"></td>
...
</table>

*/